<template>
  <div class="info-container-box">
    <div class="info-container" v-if="value">
      <div class="info-title">
        <el-tooltip :disabled="disabled" :content="info.title" placement="top">
          <span @mouseenter="mouseenter($event)" @mouseleave="mouseleave">
            <svg-icon icon-class="大标题图标" />
            {{ info.title }}
          </span>
        </el-tooltip>
        <svg-icon
          @click.stop="$emit('input', false)"
          class="close-icon"
          icon-class="关闭"
        />
      </div>
      <div class="info-content-box">
        <div v-if="info.build" class="info-content">
          <div class="content-title">
            <svg-icon icon-class="标题图标" />
            <span>建设要求</span>
          </div>
          <div class="content-body">
            <span v-html="info.build" class="content-text"></span>
          </div>
        </div>
        <div v-if="info.normExplain" class="info-content">
          <div class="content-title">
            <svg-icon icon-class="标题图标" />
            <span>指标释义</span>
          </div>
          <div class="content-body">
            <span v-html="info.normExplain" class="content-text"></span>
          </div>
        </div>
        <div v-if="info.checkDetail" class="info-content">
          <div class="content-title">
            <svg-icon icon-class="标题图标" />
            <span>体检详情</span>
          </div>
          <div class="content-body detail">
            <div class="formula-box">
              <div class="formula-icon">
                <svg-icon icon-class="公式" />
              </div>
              <div class="formula-text">
                {{ info.checkDetail.formula }}
              </div>
            </div>
            <div class="detail-box">
              <div
                v-for="(item, index) in info.checkDetail.medical"
                :key="index"
                class="detail-item"
              >
                <div class="item-value">{{ item.value }}</div>
                <div class="item-label">{{ item.label }}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="info.range" class="info-content">
          <div class="content-title">
            <svg-icon icon-class="标题图标" />
            <span>统计范围</span>
          </div>
          <div class="content-body">
            <span class="content-text">{{ info.range }}</span>
          </div>
        </div>
        <div v-if="info.source" class="info-content">
          <div class="content-title">
            <svg-icon icon-class="标题图标" />
            <span>数据来源</span>
          </div>
          <div class="content-body">
            <span class="content-text">{{ info.source }}</span>
          </div>
        </div>

        <!-- 完整社区info信息 -->
        <template v-if="info.analyze_info && info.analyze_info">
          <div
            v-for="(item, index) in info.analyze_info"
            :key="index"
            class="info-content"
          >
            <div class="content-title">
              <svg-icon icon-class="标题图标" />
              <span>{{ item.title }}</span>
            </div>
            <div class="content-body">
              <div class="analyze-title">建筑要求</div>
              <span class="content-text">{{ item.build }}</span>
              <div class="analyze-title">分析结果</div>
              <span class="content-text">{{ item.analyze_res }}</span>
            </div>
          </div>
        </template>

        <!-- 社会调查菜单选中信息 -->
        <div v-if="info.analyze_res" class="info-content">
          <div class="content-title">
            <svg-icon icon-class="标题图标" />
            <span>专项分析结果</span>
          </div>
          <div class="content-body">
            <span class="content-text">{{ info.analyze_res }}</span>
          </div>
        </div>

        <!-- 社区级联选择器 info信息 -->
        <template v-if="info.cascader && info.cascader.length">
          <div
            v-for="(item, index) in info.cascader"
            :key="index"
            class="info-content"
          >
            <div class="content-title">
              <svg-icon icon-class="标题图标" />
              <span>{{ item.title }}</span>
            </div>
            <div class="content-body">
              <div v-for="i in item.map" :key="i.key" class="analyze-title">
                <span class="cascader-title">{{ i.key }}：</span>
                <span class="content-text">{{ i.value }}</span>
              </div>
            </div>
          </div>
        </template>

        <template v-if="charts && charts.length">
          <div
            v-for="(item, index) in charts"
            :key="index"
            class="info-content"
          >
            <div class="content-title">
              <svg-icon icon-class="标题图标" />
              <span>{{ item.title }}</span>
            </div>
            <div class="content-body echarts-box">
              <v-chart
                :options="item.option"
                autoresize
                :style="{ width: '100%', height: '300px' }"
              />
            </div>
          </div>
        </template>
      </div>
    </div>
    <div v-if="show" class="btn-box">
      <svg-icon
        @click="$emit('input', !value)"
        :icon-class="value ? 'open-info' : 'close-info'"
      />
    </div>
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import infoData from '@p/mock/info.json'
import _ from 'lodash'
export default {
  name: 'info',
  components: {
    'v-chart': ECharts,
  },
  props: {
    value: {
      type: Boolean,
      dafault: false,
    },
    // 社区选择传递的info
    cascader: {
      type: Object,
      default() {
        return null
      },
    },
    // 当前选中的menu
    menu: {
      type: Object,
      default() {
        return null
      },
    },
  },
  watch: {
    menu(val) {
      this.info = infoData[val.id] || {}
      console.log(val)
      console.log(this.info)
      if (!Object.keys(this.info).length) {
        // this.$emit('input', false)
        return false
      }
      this.show = true
      /*
        type: 图表类型，默认bar。stack堆叠柱形（特殊处理）
      */
      if (this.info.fiveCase && this.info.fiveCase.length) {
        this.charts = this.drawEchart(this.info.fiveCase)
        console.log(this.charts)
      } else {
        this.charts = []
      }
    },
    cascader(val) {
      if (val) {
        this.info = val

        /*
        type: 图表类型，默认bar。stack堆叠柱形（特殊处理）
      */
        if (this.info.fiveCase && this.info.fiveCase.length) {
          this.charts = this.drawEchart(this.info.fiveCase)
          console.log(this.charts)
        } else {
          this.charts = []
        }
      }
    },
  },
  data() {
    return {
      info: {},
      show: false,
      disabled: true, // tooltip是否可用
      charts: [],
    }
  },
  methods: {
    // mouseenter
    mouseenter(e) {
      if (e.target.scrollWidth > e.target.clientWidth) {
        this.disabled = false
      }
    },
    mouseleave(e) {
      if (e.target.scrollWidth > e.target.clientWidth) {
        this.disabled = true
      }
    },
    drawEchart(data) {
      // 根据数据图表类型，获取对应得option
      let charts = []
      data.forEach((item) => {
        let obj = {
          title: item.title || '近五年数据统计情况', // 默认为 近五年数据统计情况
          option: this.getOptionByType(item, item.type),
        }
        charts.push(obj)
      })
      // console.log(charts)
      return charts
    },
    getOptionByType(data, type = 'bar') {
      const color = ['#1EBDFF', '#28D8DD', '#FFE42C', '#51BCF3', '#FF5514'] // 颜色
      const bar = {
        // bar的基础对象
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '3%',
          right: '5%',
          top: '3%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          position: 'top',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            // 坐标轴文本标签，详见axis.axisLabel
            show: true,
            textStyle: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              color: '#979CAD',
            },
          },
          splitLine: {
            //网格线
            lineStyle: {
              type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
              color: '#DEDEEE',
            },
            show: true, //隐藏或显示
          },
        },
        yAxis: {
          data: [],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            // 坐标轴文本标签，详见axis.axisLabel
            show: true,
            textStyle: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              color: '#979CAD',
            },
          },
        },
        series: [],
      }

      let options = {
        bar: bar,
        pie: {
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'vertical',
            top: 'bottom',
            left: 'right',
            data: [],
          },
          series: [
            {
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              data: [],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        },
        // 堆叠直方图
        'stack-bar': bar,
        'bar-line': {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999',
              },
            },
          },
          grid: {
            left: '3%',
            right: '5%',
            top: '12%',
            bottom: '3%',
            containLabel: true,
          },
          legend: {
            data: [],
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              axisPointer: {
                type: 'shadow',
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
            {
              type: 'value',
            },
          ],
          series: [
            {
              type: 'bar',
              barWidth: '15',
              data: [],
            },
            {
              type: 'line',
              yAxisIndex: 1,
              data: [],
            },
          ],
        },
      }
      let currentOption = options[type]
      if (type == 'bar') {
        let option = {
          yAxis: {
            data: data.key,
          },
          color: data.color ? data.color : color,
          series: [
            {
              type: 'bar',
              barWidth: '10',
              data: data.data,
            },
          ],
        }
        return _.defaultsDeep({}, currentOption, option)
      }
      // 堆叠直方图处理
      if (type == 'stack-bar') {
        let option = {
          grid: {
            top: '12%',
          },
          yAxis: {
            type: 'category',
            data: data.key,
          },
          legend: data.legend,
          color: color,
          series: data.data.map((item, index) => {
            let obj = {
              name: data.legend.data[index],
              type: 'bar',
              stack: 'stack',
              label: {
                show: false,
                position: 'insideRight',
              },
              data: item,
            }
            return obj
          }),
        }
        console.log(option)
        return _.defaultsDeep({}, currentOption, option)
      }

      // 饼图
      if (type == 'pie') {
        let option = {
          legend: {
            data: data.key,
          },
          series: [
            {
              data: data.data.map((item, index) => {
                return {
                  value: item,
                  name: data.key[index],
                }
              }),
            },
          ],
        }
        return _.defaultsDeep({}, currentOption, option)
      }

      // 柱状+线图
      if (type == 'bar-line') {
        let option = {
          color: data.color ? data.color : color,
          legend: {
            data: data.legend,
          },
          xAxis: [
            {
              data: data.key,
            },
          ],
          series: data.data.map((item, index) => {
            return {
              name: data.legend[index],
              data: item,
            }
          }),
        }
        console.log(option)
        return _.defaultsDeep({}, currentOption, option)
      }
    },
  },
}
</script>

<style lang="scss">
.info-container-box {
  position: absolute;
  height: calc(100%);
  position: absolute;
  z-index: 20;
  background: pink;

  top: 0;
  right: 0;
  .btn-box {
    width: 41px;
    height: 41px;
    text-align: center;
    line-height: 41px;
    border-radius: 50%;
    position: absolute;
    background: #e0effd;
    color: #000;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    left: -20px;
  }
  .info-container {
    width: 386px;
    height: calc(100%);
    background: #ffffff;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    box-sizing: border-box;
    overflow: hidden;
    .info-title {
      padding: 0 8px 0 12px;
      height: 50px;
      background: #e0effd;
      display: flex;
      align-items: center;
      > span {
        display: inline-block;
        max-width: calc(100% - 20px);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #000000;
      }
      .close-icon {
        position: absolute;
        top: 6px;
        right: 8px;
        font-size: 12px;
        cursor: pointer;
      }
    }
    .info-content-box {
      max-height: calc(100% - 50px);
      overflow-y: auto;
      .info-content {
        padding: 0 12px;
        padding-bottom: 16px;
        &:not(:last-child) {
          border-bottom: 1px solid #f3f3f9;
        }
        .content-title {
          padding: 16px 0 2px 0;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000000;
          > span {
            margin-left: 5px;
          }
        }
        .content-body {
          &.detail {
            padding: 0 6px;
          }
          &.echarts-box {
            margin-top: 10px;
          }
          .analyze-title {
            // 完整社区标题
            padding: 4px 0 0px 18px;
            font-size: 12px;
            font-weight: bolder;
            margin: 8px 0;
          }
          .cascader-title {
            padding: 4px 0 0px 18px;
            font-size: 12px;
            font-weight: bolder;
          }
          .content-text {
            font-size: 14px;
            padding: 4px 0 0px 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #717689;
            display: inline-block;
          }
          .formula-box {
            width: 100%;
            min-height: 38px;
            box-sizing: border-box;
            background: #f4f8fe;
            border-radius: 1px;
            display: flex;
            margin-top: 10px;
            > div {
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .formula-icon {
              width: 38px;
              background: #dceeff;
            }
            .formula-text {
              width: calc(100% - 38px);
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #717689;
              padding: 10px 12px;
              .devide {
              }
            }
          }
          .detail-box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .detail-item {
              width: calc((100% - 12px - 10px) / 2);
              min-height: 64px;
              box-sizing: border-box;
              background: #f4f8fe;
              margin-top: 10px;
              border-radius: 1px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              padding: 10px 4px;
              > div {
                text-align: center;
                font-family: Microsoft YaHei;
              }
              .item-value {
                font-size: 16px;
                font-weight: bold;
                color: #222222;
              }
              .item-label {
                font-size: 14px;
                font-weight: 400;
                color: #979cad;
              }
            }
          }
        }
      }
    }
  }
}
</style>
